<template>
  <div>
    <div style="margin:20px 20px 20px 0px;width: 400px;display: flex;">
      <Input v-model="pageParams.search"
             search
             clearable
             @on-enter="list()"
             size="large"
             placeholder="请输入搜索的内容" />

      <Button @click="list()"
              style="margin-left: 10px;"
              type="info">搜索</Button>
      <Button @click="reset()"
              style="margin-left: 10px;"
              type="success">重置</Button>
    </div>
    <el-table :data="tableData"
              stripe
              style="width: 100%">
      <el-table-column prop="picUrl"
                       label=""
                       width="100">
        <template slot-scope="scope">
          <el-avatar shape="square"
                     size="large"
                     style="width: 50px; height: 50px"
                     :src="scope.row.picUrl"></el-avatar>
        </template>
      </el-table-column>

      <el-table-column prop="artistName"
                       label="歌手名"
                       width="180">
        <template slot-scope="scope">
          <Tag color="primary">{{scope.row.artistName }}</Tag>
        </template>
      </el-table-column>

      <el-table-column prop="albumSize"
                       label="专辑数">
      </el-table-column>

      <el-table-column prop="musicSize"
                       label="歌曲数"> </el-table-column>

      <el-table-column prop="fansCount"
                       label="粉丝数"> </el-table-column>

      <el-table-column prop="createTime"
                       label="更新时间"> </el-table-column>

      <el-table-column fixed="right"
                       label="操作"
                       width="150">
        <template slot-scope="scope">
          <Button type="success"
                  size="small"
                  @click="handleClick(scope.row)"
                  :class="'row' + scope.row.id">播放</Button>
          <Button v-if="1 === 2"
                  style="margin-left: 10px"
                  type="success"
                  size="small"
                  @click="handleClick(scope.row)"
                  :class="'row' + scope.row.id">暂停</Button>

          <Button style="margin-left: 10px"
                  type="error"
                  size="small"
                  @click="handleClick(scope.row)"
                  :class="'row' + scope.row.id">删除</Button>
        </template>
      </el-table-column>
    </el-table>

    <div style="margin-bottom: 20px; margin-top: 20px">
      <Page :total="total"
            :page-size="pageParams.size"
            :current="pageParams.current"
            :page-size-opts=page_size_opts
            show-sizer
            @on-change="pageChange"
            @on-page-size-change="pageSizeChange" />
    </div>
  </div>
</template>

<script>
import api from '@/api/apis/sys.js'

export default {
  data() {
    return {
      total: 0,
      pageParams: {
        size: 10,
        current: 1,
      },
      page_size_opts: [10, 20, 50, 100],
      tableData: [],
    }
  },

  mounted() {
    this.list()
  },
  methods: {
    handleClick(row) {
      console.log(row)
    },

    list() {
      api.musicArtistList(this.pageParams).then((res) => {
        this.tableData = res.data.data.result
        this.total = res.data.data.total
      })
    },
    reset() {
      this.pageParams.search = undefined
      this.pageParams.current = 1
      this.list()
    },
    //页码切换事件
    tabClick() {
      this.pageParams.current = 1
      this.list()
    },
    //页码变更
    pageChange(current) {
      this.pageParams.current = current
      this.list()
    },
    //切换每页条数
    pageSizeChange(size) {
      this.pageParams.size = size
      this.list()
    },
  },
}
</script>

<style>
</style>